<template>
  <div>
    <div class="title">订单管理</div>
    <!-- 上部导航 -->
    <SelectBar :barData="['全部订单','待准备','待自提','未归还']" @handleSelect="handleSelect" ></SelectBar>
    <div style="background-color: #fff;width: 100%;">
      <div style="padding: 10px 10px 10px 10px; display: flex;">
        <el-input
          v-model="searchInput"
          placeholder="请输入内容"
          @click-suffix="search"
          suffix-icon="el-icon-search"
          style="width: 300px;"
        >
        </el-input>
        <div style="margin-left: auto;">
          <el-button type="danger"  >批量删除</el-button>
        </div>
      </div>
      
      <!-- 表格 -->
      <div style="padding:10px;margin-bottom: 100px;margin-right:50px ;">
        <el-table
          ref="multipleTable"
          border
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column label="商品信息" width="300" >
            <template slot-scope="scope">
              <div style=" display: flex;align-items: center;">
                <el-image
                style="width: 150px; height: 80px"
                :src="scope.row.image"
                fit="scale-down"></el-image>
                <div>
                  {{ scope.row.name }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="leaseId" label="商品编号" width="120">
          </el-table-column>
          <el-table-column prop="amount" label="价格(元)" width="120">
          </el-table-column>
          <el-table-column label="租赁时间" width="120">
            <template slot-scope="scope">
                <div>{{ scope.row.specTime/24* scope.row.timeNumber}}天</div>
            </template>
          </el-table-column>
          <el-table-column label="用户信息" width="200">
            <template slot-scope="scope">
              <div>{{ scope.row.fullName }}</div>
              <div>手机号{{ scope.row.phone }}</div>
              <div>{{ scope.row.dormitory }}</div>
            </template>
          </el-table-column>
          <el-table-column label="提交时间" width="200">
            <template slot-scope="scope">
              <div>{{ scope.row.createTime }}</div>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.status===1" style="color:rgb(138, 11, 250);">待付款</div>
              <div v-else-if="scope.row.status===2" style="color:rgb(127, 157, 255);">待准备</div>
              <div v-else-if="scope.row.status===3" style="color:rgb(127, 157, 255);">待自提</div>
              <div v-else-if="scope.row.status === 4" style="color:rgb(127, 157, 255);">使用中</div>
              <div v-else-if="scope.row.status === 5" style="color:rgb(255, 156, 8);">待归还</div>
              <div v-else-if="scope.row.status === 6" style="color:rgb(99, 248, 136);">已归还</div>
              <div v-else-if="scope.row.status === 7" style="color:rgb(255, 47, 36);">申请退款</div>
              <div v-else-if="scope.row.status === 8" style="color:rgb(255, 47, 36);">已取消</div>
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
                <div v-if="scope.row.status===2">
                  <div class="handle" @click="handleStatusChange(3, scope.row.id)">放货</div>
                  <div class="handle" @click="handleCancelRefund(7, scope.row.id)">退款</div>
                  <div class="handle" @click="handleCancelRefund(8, scope.row.id)">取消订单</div>
                </div>
                <div v-else-if="scope.row.status === 1">
                  <div class="handle" @click="handleCancelRefund(8, scope.row.id)">取消订单</div>
                  <!-- <div class="handle">删除</div> -->
                </div>
                <div v-else-if="scope.row.status === 3">
                  <div class="handle" @click="handleStatusChange(4, scope.row.id)">确定自提</div>
                  <div class="handle" @click="handleCancelRefund(8, scope.row.id)">取消订单</div>
                </div>
                <div v-else-if="scope.row.status === 4">
                    <div class="handle" @click="handleStatusChange(5, scope.row.id)">提前完成</div>
                  </div>
                <div v-else-if="scope.row.status === 5">
                  <div class="handle" @click="handleStatusChange(6,scope.row.id)">归还</div>
                </div>
                <div v-else-if="scope.row.status > 5">
                  <!-- <div class="handle" @click="handleCancelRefund(8, scope.row.id)">取消订单</div> -->
                  <!-- <div class="handle">删除</div> -->
                </div>
                
            </template>
          </el-table-column>
          <el-table-column label="多选" type="selection" width="55"> </el-table-column>
          
          
        </el-table>
        <el-pagination
          style="margin-top: 20px;"
          :page-size="pageSize"
          :hide-on-single-page="true" @current-change="handlePageChange"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>




  </div>
</template>

<script>

//订单状态
// const PENDING_PAYMENT = 1;
// const PENDING_PREPEND = 2;
// const PENDING_PICK = 3;
// const USING = 4;
// const COMPLETED = 5;
// const RETURNED = 6;
// const REFUND = 7;
// const CANCELLED = 8;


import SelectBar from '@/components/SelectBar.vue'
import {getPage,changeStatus, OrderCancelRefund } from '@/api/leaseOrderManage'
export default {
  data(){
    return {
      selectIndex: 0,
      tableData: [
      ],
      searchInput:'',
      page: 1,
      pageSize:10,
      total: 0,
      orderId: 0,
      
    }
  },
  methods:{
    search(){

    },
    handleSelect(index) { 
      this.selectIndex = index 
      this.page=1
      this.orderQueue()
    },
    
    handlePageChange(val){
      this.page=val
      this.orderQueue()
    },
    async orderQueue(){
      let name=null
      let orderId=null
      if(parseInt(this.searchInput).toString() === this.searchInput.toString()){
        orderId= parseInt(this.searchInput)
      }
      else name= this.searchInput
      let res = await getPage(name, this.page, this.pageSize, this.filterStatus, orderId)
      this.tableData = res.data.data.records
      this.total = res.data.data.total
    },
    async handleStatusChange(status,orderId){
      let message
      if(status === 3)message='是否放货'
      else if(status===4)message='是否已自提'
      else if(status===5)message='是否要提前完成'
      else if(status===6)message='是否已归还'
      let res = await this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).catch(() => {
        this.$message({ type: 'warning', message: '已取消' })
      })
      if (!res) return
      res=await changeStatus(status,orderId)
      if(res.data.code===1){
        if(status===3)
          this.$message('放货成功')
        else if(status===6)
          this.$message('归还成功')
      }
      this.orderQueue()
    },
    async handleCancelRefund(status, orderId) {
      //status 7退款 8取消

      let res=await this.$prompt(status===7?'退款原因':'取消原因','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern:/\S/,
        inputErrorMessage:'原因不能为空白'
      }).catch(()=>{
        this.$message({type:'warning',message:'已取消'})
      })
      if(!res)return 
      let reason=res.value
      res = await OrderCancelRefund(status, orderId,reason)
      if (res.data.code === 1) {
        if (status === 7)
          this.$message('退款成功')
        else if (status === 8)
          this.$message('取消订单成功')
      }
      this.orderQueue()
    },
  },
  async created(){
    this.orderQueue()
  }
  ,
  computed:{
    filterStatus(){
      if(this.selectIndex===1)return 2
      else if (this.selectIndex === 2)return 3
      else if(this.selectIndex === 3)return 5
      else return null
      
    }
  },
  components:{
    SelectBar,
  }



};
</script>

<style scoped>
.title {
  font-size: larger;
  margin: 10px 10px 30px 0;
  /* font-family: Microsoft YaHei; */
}
.bar-father {
  display: flex;
  /* margin-left: 10px; */
}
.selected-bar {
  background-color: #fff;
  /* margin: 10px 10px; */
  padding: 5px 0px;
  border-bottom: #9370db solid 2px;
}
.bar {
  /* margin: 20px 20px; */
  padding: 15px 35px;
}
.bar-padding {
  background-color: #fff;
  border-radius: 5px 5px 0 0;
  padding: 10px 35px 15px 35px;
}
.handle{
  margin:0 10px;
  color: #409EFF;
  /* 鼠标移上去有手形 */
  cursor: pointer
}

</style>
